<template>
  <div class="container"> 
   <div class="header">
      <img :src="luckDrawData.img_url" mode="aspectFill"/>
      <!-- <img :src="luckDrawData.title_url" mode="aspectFill" class="timer"/> -->
      <span class="prizeName">奖品：{{luckDrawData.title}}</span>
      <span class="prizeExplain">
          <img :src="active.join.joinImg" class="gou" v-if="luckDrawData.status_type=='join'"/>
          <img :src="active.end.endImg" class="gou" v-else-if="luckDrawData.status_type=='end'"/>
          <img :src="active.start.startImg" class="gou" v-else/>
          <span  class="details_tip details_green" v-if="luckDrawData.status_type=='join'">{{active.join.joinDesc}}</span>
          <span class="details_tip details_red" v-else-if="luckDrawData.status_type=='end'">{{active.end.endDesc}}</span>
          <span  class="details_tip" v-else>{{active.start.startDesc}}</span>
        到达 {{luckDrawData.prize_num}} 人参与自动开奖
      </span>
      <div class="prizeProvider">
        <span>{{luckDrawData.qrcode_title}}</span>
        <span @click="eject">点击查看 ></span>
      </div>
    </div>
    <div class="notice" v-if="luckDrawData.notice!=null">
      公告：<br/>
      <text>{{luckDrawData.notice}}</text>
    </div>
    <div class="channel">
      <div class="channelTitle">购买渠道</div>
      <div class="channelDetails">复制淘口令，登录手机TaoBao，有什么问题可以咨询小客服哦。</div>
      <div class="taoBaoCode" @click="copy">{{luckDrawData.taobao_code}}</div>
      <div class="codeTip" @click="copy">》点击复制淘口令《</div>
    </div>
    <div class="introductionPrizes">
      <div class="title">奖品介绍:</div>
      <div class="name">{{luckDrawData.qrcode_title}}</div>
      <wxParse :content="luckDrawData.content" />
      <div class="understand">
        <span>{{luckDrawData.link_title}}</span>
        <span @click="goDetails">点击了解 ></span>
      </div>
    </div>
    <div class="wrap" v-if="qrcodeShow">
      <div class="wrap_content" @longpress="save">
          <img :src="luckDrawData.qrcode_img_url" mode="aspctFit"/>
      </div>
      <img src="http://file.rzkeji.com/web/loveciy/img/close.png" class="close" @click="close"/>
    </div>
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'
export default {
  props:['luckDrawData'],
  components: {
    wxParse,
  },
  data () {
    return {
      content:'<h1>dsadsa</h1>',
      active:{
        type:"drawList",
        end:{
          endImg:"http://file.rzkeji.com/web/loveciy/img/luckDraw/end.png",
          endDesc:"已开奖"
        },
        start:{
          startImg:"http://file.rzkeji.com/web/loveciy/img/luckDraw/start.png",
          startDesc:"进行中"
        },
        join:{
          joinImg:"http://file.rzkeji.com/web/loveciy/img/luckDraw/start.png",
          joinDesc:"已参与"
        }
      },
      qrcodeShow:false
    }
  },
  computed:{
 
  },
  methods:{
    copy(){
      this.$currency.copyText(this.luckDrawData.taobao_code);
    },
    goDetails(){
      this.$currency.goDetails(this.luckDrawData.link_url);
    },
    eject(){
      this.qrcodeShow=true;
    },
    close(){
      this.qrcodeShow=false;
    },
    save(){
      var _this=this;
      wx.getImageInfo({
        src:this.luckDrawData.qrcode_img_url,
        success(res){
          wx.saveImageToPhotosAlbum({
            filePath:res.path,
            success(res){
              if(res.errMsg.indexOf('ok')!=-1){
                _this.$currency.showToast('保存成功','none',"")
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.header{width: 375px;height:307px;position: relative;}
.header img{width: 375px;height: 187.5px;}
.header .timer{width: 92.5px;height:24px;position: absolute;right: 20px;top: 20px;font-size: 10px;color:#fff;background: #949494;line-height: 24px;text-align: center;display: block;}
.prizeName{width: 339px;height: 18px;font-size: 15px;margin-left: 12px;color: #333333;line-height: 18px;display: block;margin-top: 20px;}
.prizeExplain{width: 339px;height: 14px;font-size: 12px;margin-left: 12px;color: #999999;line-height: 14px;display: block;margin-top: 10px;}
.header img.gou{width: 14px;height: 14px;vertical-align: middle;margin-right: 3px;}
.prizeProvider{width: 351px;height:16.5px;font-size: 14px;margin-left:12px;display: flex;justify-content: row;margin-top: 46px;position: relative;}
.prizeProvider span:nth-of-type(1){}
.prizeProvider span:nth-of-type(2){position: absolute;right: 0;top: 0;}
.notice{width: 335px;background-color: #FEF7E7;padding: 20px;font-size: 14px;margin-top: 40px;line-height: 30px;color: #766B57}
.channel{width: 351px;height: 200px;margin-left: 12px;margin-top: 30px;}
.channelTitle{width: 351px;height: 23.5px;font-size: 14px;}
.channelDetails{width: 331px;color: #999999;line-height: 23.5px;font-size: 14px;margin-top: 5px;margin-left: 10px;}
.taoBaoCode{width: 351px;height: 29px;line-height: 29px;text-align: center;font-size: 18px;color:#666666;border: 1px solid #797979;border-radius: 10px;margin-top: 15px;}
.codeTip{width: 126.5px;height: 11.5px;margin:5px auto;font-size: 14px;text-align: center;line-height: 11.5px;color: #999999;}
.introductionPrizes{width: 351px;margin-left: 12px;}
.introductionPrizes .title,.introductionPrizes .name{width: 351px;height: 11.5px;font-size: 14px;color: #333333;}
.introductionPrizes .name{margin-top: 20px;margin-bottom: 20px;}
.understand{width: 321px;height: 14px;background-color: #FEF7E7;display: flex;position: relative;margin-top: 10px;border-radius: 7px;padding:15px;}
.understand span{font-size: 14px;text-align: center;line-height: 44px;height: 44px;display: block;position: absolute;top: 0;color: #766B57}
.understand span:nth-of-type(1){width: 56.5px;left: 5px;}
.understand span:nth-of-type(2){width: 80px;right: 0;}
.fontGreen{color: green}
.fontRed{color: red}
.wrap{width: 100%;height: 100%;background-color: rgba(51,51,51,0.5);position: fixed;left: 0;top: 0;}
.wrap_content{width:297.5px;height: 400.5px; background-color:#fff;margin: 50px auto; border-radius: 10px;padding: 17px 0px;margin-bottom: 0px;}
.wrap_content img{width: 297.5px;height:297.5px;margin-top:50px;}
.close{width: 30px;height: 30px;display: block;margin:10px auto;}
.details_red{color: red;}
.details_green{color: #09A110;}
    .wxParse .img{max-width: 100% !important;}
</style>